<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微金所主页</title>
    <!-- 导入bootstrap的css -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <!-- 导入微金所官方图标的一个样式文件,定义了需要的图标的类名 -->
    <link rel="stylesheet" href="css/font.css">
    <!-- 导入主页的index.css文件 -->
    <link rel="stylesheet" href="less/index.css">

</head>

<body>
    <!-- 头部区域 -->
    <header id="header" class="hidden-xs hidden-sm">
        <!-- 布局容器 -->
        <div class="container">
            <div class="row text-center">
                <!-- 不规则栅格 -->
                <div class="col-md-2">
                    <!-- 给第一个a标签设置鼠标移入事件(显示二维码) -->
                    <a href="#" class="link">
                        <!-- 字体图标,在bootstrap>组件>字体图标里面找到直接复制类名 -->
                        <i class="glyphicon glyphicon-phone"></i>
                        手机微金所
                        <span class="glyphicon glyphicon-chevron-up"></span>
                        <!-- 二维码 -->
                        <img src="./img/c_06.jpg" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <i class="glyphicon glyphicon-phone-alt"></i>
                    4006-89-4006（服务时间：9:00-21:00）
                </div>
                <div class="col-md-2">
                    <a href="#">常见问题</a>
                    <a href="#">财富登录</a>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-danger">免费注册</button>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">
                        登录
                    </button>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                                    <h4 class="modal-title text-left" id="myModalLabel">欢迎登录</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入用户名">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" id="inputPassword3"
                                                    placeholder="请输入密码">
                                            </div>
                                        </div>
                                        <div class="form-group text-left">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" class="btn btn-primary">登录</button>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </header>
    <!-- 导航条区域 -->
    <nav id="nav" class="navbar navbar-default" data-spy="affix" data-offset-top="40">
        <!-- 居中的版心容器 -->
        <div class="container">
            <!-- 导航条的头部:当屏幕为超小屏幕时,手机端将会显示一个按钮作为菜单切换 -->
            <div class="navbar-header">
                <!-- sr-only aria  role等都是盲人设备阅读器使用属性 -->
                <!-- data-都是功能属性都有用的 -->
                <!-- class类名 都是控制样式的 -->
                <!-- 按钮是只有手机端才能看见 -->
                <!-- collapse是一个JS插件集成在了导航条里面 -->
                <!-- data-toggle="collapse"  插件的功能功能的开关 如果有这个属性插件的点击功能才能开启 如果没有这个属性开启不了插件的功能
                就是插件的初始化有属性就会初始化 没有这个属性不会被触发 -->
                <!-- data-target控制折叠菜单控制的内容的选择器 #是id选择器 必须有一个id和他属性里面的的一样 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- 品牌名称:微金所  不管屏幕大小都始终在左边 -->
                <a class="navbar-brand" href="#">
                    <i class="icon-icon"></i>
                    <i class="icon-logo"></i>
                </a>
            </div>

            <!-- 导航条的身体 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- 左边导航 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">我要投资</a></li>
                    <li><a href="#">我要借款</a></li>
                    <li><a href="#">平台介绍</a></li>
                    <li><a href="#">新手专区</a></li>
                    <li><a href="#">最新动态</a></li>
                    <li><a href="#">微论坛</a></li>

                </ul>
                <!-- 右边的个人中心 -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">个人中心</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!-- 轮播图区域 -->
    <section id="banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- 轮播图小圆点,有几张图就要准备几个小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- 轮播图的图片容器 -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <!-- 当前屏幕为超小屏幕时,隐藏大的背景图片,显示小图片 -->
                    <div class="large-img hidden-xs" style="background-image: url(./img/slide_01_2000x410.jpg)"></div>
                    <!-- 当前屏幕为小/中/大屏幕时,隐藏小图片,显示大的背景 -->
                    <img class="small-img hidden-sm hidden-md hidden-lg" src="./img/slide_01_640x340.jpg">
                </div>
                <div class="item">
                    <!-- 当前屏幕为超小屏幕时,隐藏大的背景图片,显示小图片 -->
                    <div class="large-img hidden-xs" style="background-image: url(./img/slide_02_2000x410.jpg)"></div>
                    <!-- 当前屏幕为小/中/大屏幕时,隐藏小图片,显示大的背景 -->
                    <img class="small-img hidden-sm hidden-md hidden-lg" src="./img/slide_02_640x340.jpg">
                </div>
                <div class="item">
                    <!-- 当前屏幕为超小屏幕时,隐藏大的背景图片,显示小图片 -->
                    <div class="large-img hidden-xs" style="background-image: url(./img/slide_03_2000x410.jpg)"></div>
                    <!-- 当前屏幕为小/中/大屏幕时,隐藏小图片,显示大的背景 -->
                    <img class="small-img hidden-sm hidden-md hidden-lg" src="./img/slide_03_640x340.jpg">
                </div>
                <div class="item">
                    <!-- 当前屏幕为超小屏幕时,隐藏大的背景图片,显示小图片 -->
                    <div class="large-img hidden-xs" style="background-image: url(./img/slide_04_2000x410.jpg)"></div>
                    <!-- 当前屏幕为小/中/大屏幕时,隐藏小图片,显示大的背景 -->
                    <img class="small-img hidden-sm hidden-md hidden-lg" src="./img/slide_04_640x340.jpg">
                </div>

            </div>

            <!-- 控制器: 上一页/下一页按钮 -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">上一页</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">下一页</span>
            </a>
        </div>
    </section>
    <!-- 特色介绍区域 -->
    <!-- 当前屏幕为xs时,隐藏 -->
    <section id="feature" class="hidden-xs">
        <div class="container">
            <div class="row">
                <!-- 当前屏幕为md,lg时,分3列 -->
                <!-- 当前屏幕为sm时,分2列 -->
                <div class="col-md-4 col-sm-6">
                    <div class="media">
                        <a href="#">
                            <div class="media-left">
                                <i class="icon-meiyuan"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保障财产安全</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="media">
                        <a href="#">
                            <div class="media-left">
                                <i class="icon-meiyuan"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保障财产安全</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="media">
                        <a href="#">
                            <div class="media-left">
                                <i class="icon-meiyuan"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保障财产安全</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="media">
                        <a href="#">
                            <div class="media-left">
                                <i class="icon-meiyuan"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保障财产安全</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="media">
                        <a href="#">
                            <div class="media-left">
                                <i class="icon-meiyuan"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保障财产安全</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="media">
                        <a href="#">
                            <div class="media-left">
                                <i class="icon-meiyuan"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保障财产安全</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 立即预约区域 -->
    <section id="booking">
        <div class="container">
            <div class="pull-left">
                <i class="icon-naozhong"></i>
                现在有<span class="text-danger">458</span>人在排队，累计预约交易成功<span class="text-danger">7409</span>次。 什么是预约投标？
                <a href="#" class="text-danger">立即预约</a>
            </div>
            <div class="pull-right">
                <a href="#"><i class="icon-video"></i>微金所企业宣传片</a>
            </div>
        </div>
    </section>
    <!-- 商品区域 -->
    <section id="products">
        <div class="container">
            <!-- 使用到JS插件 > 标签页插件 tab栏切换 -->
            <div class="title">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <!-- 每个li控制每一个商品类型的容器 -->
                    <!-- 通过href属性 和 data-toggle="tab" 控制切换功能
                        href 控制切换的元素的选择器
                        data-toggle 开关控制切换功能是否开启 -->
                    <li class="active"><a href="#product1" data-toggle="tab">特别推荐</a></li>
                    <li><a href="#product2" data-toggle="tab">微投资</a></li>
                    <li><a href="#product3" data-toggle="tab">微小宝</a></li>
                    <li><a href="#product4" data-toggle="tab">微消费</a></li>
                    <li><a href="#product5" data-toggle="tab">微增利</a></li>
                    <li><a href="#product6" data-toggle="tab">微金宝</a></li>
                    <li><a href="#product7" data-toggle="tab">微转让</a></li>
                </ul>
            </div>
            <!-- 商品内容 -->
            <div class="tab-content">
                <!-- tab-pane代表类商品的类 -->
                <!-- fade 和 fade in 添加淡入淡出效果 默认显示添加 fade in 其他隐藏加fade -->
                <div class="tab-pane fade in active" id="product1">
                    <div class="row">
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="product active">
                                <div class="left">
                                    <div class="title">
                                        <h4>新手体验标008期</h4>
                                    </div>
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <p><strong>8</strong> <sub>%</sub></p>
                                    <p>年利率</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="product">
                                <div class="left">
                                    <div class="title">
                                        <h4>新手体验标008期</h4>
                                    </div>
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="tooltips">
                                        <button type="button" class="btn btn-default" data-toggle="tooltip"
                                            data-placement="top" title="赵丽颖">颖</button>
                                        <button type="button" class="btn btn-default" data-toggle="tooltip"
                                            data-placement="top" title="冯绍峰">峰</button>

                                    </div>
                                    <p><strong>8</strong><sub>%</sub></p>
                                    <p>年利率</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="product">
                                <div class="left">
                                    <div class="title">
                                        <h4>新手体验标008期</h4>
                                    </div>
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <p><strong>8</strong><sub>%</sub></p>
                                    <p>年利率</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="product">
                                <div class="left">
                                    <div class="title">
                                        <h4>新手体验标008期</h4>
                                    </div>
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <p><strong>8</strong><sub>%</sub></p>
                                    <p>年利率</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="product">
                                <div class="left">
                                    <div class="title">
                                        <h4>新手体验标008期</h4>
                                    </div>
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <p><strong>8</strong><sub>%</sub></p>
                                    <p>年利率</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="product">
                                <div class="left">
                                    <div class="title">
                                        <h4>新手体验标008期</h4>
                                    </div>
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p><strong>1000.00</strong><sub>万</sub></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <p><strong>8</strong><sub>%</sub></p>
                                    <p>年利率</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="product2">2</div>
                <div role="tabpanel" class="tab-pane" id="product3">3</div>
                <div role="tabpanel" class="tab-pane" id="product4">4</div>
                <div role="tabpanel" class="tab-pane" id="product5">5</div>
                <div role="tabpanel" class="tab-pane" id="product6">6</div>
                <div role="tabpanel" class="tab-pane" id="product7">7</div>
            </div>
        </div>
    </section>
    <!-- 新闻区域 -->
    <div id="news">
        <div class=" container">
            <div class="row">
                <div class="col-md-2 col-md-offset-2">
                    <h4>全部新闻</h4>
                </div>
                <div class="col-md-1">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#news01" data-toggle="tab">
                                <i class="icon-news01"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#news2" data-toggle="tab">
                                <i class="icon-news02"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#news3" data-toggle="tab">
                                <i class="icon-news03"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#news4" data-toggle="tab">
                                <i class="icon-news04"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-7">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="news01">
                            <ul class="list-group">
                                <li class="list-group-item">【微新闻】 宋喆获刑6年新 46万</li>
                                <li class="list-group-item">【微新闻】 教育部肯定本转专新 43万</li>
                                <li class="list-group-item">【微新闻】 大轰炸取消上映 40万</li>
                                <li class="list-group-item">【微新闻】 美国退出万国邮政 38万</li>
                                <li class="list-group-item">【微新闻】 袁惟仁手术成功新 34万</li>
                                <li class="list-group-item">【微新闻】 开晓胜列入失信人 34万</li>
                                <li class="list-group-item">【微新闻】 袁惟仁手术成功新 34万</li>
                                <li class="list-group-item">【微新闻】 eBay起诉亚马逊 34万</li>
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="news2">2</div>
                        <div class="tab-pane fade" id="news3">3</div>
                        <div class="tab-pane fade" id="news4">4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部区域 -->
    <div id="footer">
        <div class="container">
            <div class="title">
                <h3>合作伙伴</h3>
            </div>
            <div class="content">
                <div class="row">
                    <div class="col-sm-4 col-xs-12">
                        <div class="row">
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner1"></i></a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner2"></i></a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner3"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="row">
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner4"></i></a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner5"></i></a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner6"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="row">
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner7"></i></a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner8"></i></a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#"><i class="icon-partner9"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 先导入jquery,因为bootstrap的js依赖于jquery -->
    <script src="
        lib/jquery/jquery.js"></script> <!-- 导入bootstrap的js文件 -->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
</body>

</html>